<template>
	<view>
		<view class="article">
			<view class="title">{{list.title}}</view>
			<view class="user">
				<view class="user-header-image">
					<image :src="list.user_img"></image>
				</view>
				<view class="user-name">
					<view class="name">{{list.user_name}}</view>
					<view class="time">{{list.time|getTime}}</view>
				</view>
				<view class="isguanzhu" >已关注</view>
			</view>
			
			<view class="article-content">

				 <rich-text :nodes="list.content"></rich-text>
				
				
			</view>
			
			<view class="article-info">
				<view>来源：网络资源</view>
				<view>作者：不详</view>
				<view class="tixing">
					<text>提醒</text>
					本文内容均来自网络资源
				</view>
			</view>
			
		</view>
		
		<view class="footer">
			<view class="icon">
				<text class="iconfont icon-pinglun2"></text>
				<text class="iconfont icon-shoucang"></text>
				<text class="iconfont icon-zhuanfa1"></text>
				
			</view>
		</view>
	</view>
</template>

<script>
	
	import moment from 'moment';
	
	export default {
		data() {
			return {
				list: []
			}
		},
		methods: {
			
		},
		onLoad(options) {
			this.list = getApp().globalData.i_article;
			// console.log(options);
		},
		filters: {
			getTime(time) {
				return moment(time * 1000).format('YYYY-M-DD');
			}
		}
	}
</script>

<style scoped lang="scss">

	.article {
		background-color: #f7faff;
		width: 100%;
		height: 100%;
		padding: 15px 15px 45px;
		box-sizing: border-box;
		.title {
			font-size: 45rpx;
			font-weight: 800;
		}
		
		.user {
			position: relative;
			display: flex;
			margin-top: 50rpx;
			height: 40px;
			.user-header-image {
				width: 40px;
				height: 40px;
				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}
			.user-name {
				margin-left: 10px;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				color: #333;
				.name {
					font-size: 15px;
				}
				.time {
					font-size: 12px;
					color: #999;
				}
			}
			.isguanzhu {
				position: absolute;
				right: 0;
				height: 24px;
				padding: 2px 5px;
				box-sizing: border-box;
				background-color: #e6251d;
				font-size: 12px;
				line-height: 20px;
				color: #ffffff;
				top: 50%;
				transform: translateY(-50%);
				border-radius: 6rpx;
			}
		}
		
		.article-content {
			margin: 40rpx 0;
			line-height: 52rpx;
			font-family: "宋体";
			image {
				width: 100%;
				margin: 30rpx 0;
				vertical-align: middle;
			}
		}
		
		.article-info {
			color: #999;
			font-size: 12px;
			margin-bottom: 40rpx;
			.tixing {
				position: relative;
				width: 100%;
				height: 60px;
				margin-top: 40rpx;
				border-top: 1px solid #999;
				text-align: center;
				line-height: 60px;
				color: #333;
				text {
					top: -10px;
					left: 50%;
					transform: translateX(-50%);
					position: absolute;
					line-height: 15px;
					background-color: #f7faff;
					height: 15px;
					padding: 2px 5px;
					font-size: 15px;
					z-index: 5;
					box-sizing: border-box;
				}
			}
		}
	}
	
	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 45px;
		z-index: 6;
		background-color: #fff;
		// box-shadow: 0px -1px 5px #888888;
		.icon {
			float: right;
			height: 45px;
			margin-right: 15px;
			
			text {
				display: inline-block;
				font-size: 22px;
				line-height: 45px;
				padding: 0 16rpx;
			}
		}
	}

</style>
